<template>
  <div class="detail-container">
    <el-form
      ref="postForm"
      :rules="rules"
      :model="postForm" 
      label-width="120px" 
      label-position="right"
      v-loading="fetchLoading"
    >
      <el-form-item label="父级菜单">
        <el-input v-model="postForm.pid" v-if="showTreeInput" disabled></el-input>
        <el-cascader 
          style="width: 100%;"
          v-model="postForm.pid"
          :options="authList"
          :props="cascaderProps" 
          clearable 
          placeholder="请选择父级菜单 不填则为顶级菜单"
        />
      </el-form-item>
      <el-form-item label="菜单名称" prop="menu_title">
        <el-input v-model="postForm.menu_title" placeholder="如 商品管理"></el-input>
      </el-form-item>
      <el-form-item label="菜单路径" prop="menu_path">
        <el-input v-model="postForm.menu_path" placeholder="如 /goods"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="menu_icon">
        <el-input v-model="postForm.menu_icon" placeholder="svg-class 或 element-ui 的 icon"></el-input>
      </el-form-item>
      <el-form-item label="重定向路径">
        <el-input v-model="postForm.menu_redirect" placeholder="子路径时为空 否则 如 /goods/list"></el-input>
      </el-form-item>
      <el-form-item label="高亮的菜单">
        <el-input v-model="postForm.menu_active" placeholder="当不在菜单中显示时要高亮的菜单 如 /goods/list"></el-input>
      </el-form-item>
      <el-form-item label="菜单组件名称" prop="menu_component_name">
        <el-input v-model="postForm.menu_component_name" placeholder="如 Goods"></el-input>
      </el-form-item>
      <el-form-item label="菜单组件路径">
        <el-input v-model="postForm.menu_component_path" placeholder="顶级路由为空 否则 如 /views/goods/list"></el-input>
      </el-form-item>
      <el-form-item label="操作方法">
        <el-input v-model="postForm.actions" placeholder="顶级路由为空 否则多个以英文逗号分隔 如 list,add,edit"></el-input>
      </el-form-item>
      <el-form-item label="组件缓存">
        <el-switch v-model="postForm.menu_component_cache" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="props接受参数">
        <el-switch v-model="postForm.menu_props" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="菜单隐藏">
        <el-switch v-model="postForm.menu_hidden" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="固定tagView">
        <el-switch v-model="postForm.affix" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="面包屑中显示">
        <el-switch v-model="postForm.breadcrumb" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="嵌套菜单">
        <el-switch v-model="postForm.always_show" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="是否上线">
        <el-switch v-model="postForm.status" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary" 
          :loading="saveLoading"
          @click.native.prevent="handleSave"
        >{{ update ? '确认更新' : '确认新增' }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { authInfo, authList, authCreate, authUpdate } from '@/api/auth'

const defaultForm = {
  pid: 0,
  menu_title: '',
  menu_path: '',
  menu_icon: '',
  menu_redirect: '',
  menu_active: '',
  menu_component_name: '',
  menu_component_path: '',
  menu_component_cache: 1,
  menu_props: 0,
  menu_hidden: 0,
  actions: '',
  affix: 0,
  breadcrumb: 1,
  always_show: 1,
  status: 1,
}

export default {
  name: 'AuthDetail',
  props: {
    update: { // 是否编辑
      type: Boolean,
      default: false,
    },
    id: [String, Number], // id 编辑时传递
  },
  data() {
    return {
      authList: [],
      postForm: {},
      fetchLoading: false,
      saveLoading: false,
      rules: {
        menu_title: [{ required: true, message: "菜单标题为必填", trigger: "blur" }],
        menu_path: [{ required: true, message: "菜单路径为必填", trigger: "blur" }],
        menu_icon: [{ required: true, message: "菜单路径为必填", trigger: "blur" }],
        menu_component_name: [{ required: true, message: "菜单路径为必填", trigger: "blur" }],
      },
      cascaderProps: {
        checkStrictly: true, 
        expandTrigger: 'hover',
        emitPath: false,
        value: 'id',
        label: 'menu_title',
        leaf: 'pid',
      },
      showTreeInput: process.env.NODE_ENV === 'development'
    }
  },
  created() {
    if (this.update) {
      this.getAuthInfo()
    } else {
      this.postForm = Object.assign({}, defaultForm)
    }
    this.getAuthList()
  },
  methods: {
    // 权限列表
    async getAuthList() {
      const { data } = await authList()
      this.authList = data
    },
    // 权限详情
    async getAuthInfo() {
      try {
        this.fetchLoading = true
        const { info } = await authInfo(this.id)
        this.postForm = info
      } finally {
        this.fetchLoading = false
      }
    },
    // 保存、修改
    handleSave() {
      this.$refs.postForm.validate(async valid => {
        if (!valid) return
        try {
          this.saveLoading = true
          if (this.update) {
            await authUpdate(this.postForm)
            this.$notify.success({
              title: '成功',
              message: '更新成功',
              duration: 3000,
            });
            this.$router.go(-1)
          } else {
            await authCreate(this.postForm)
            this.$notify.success({
              title: '成功',
              message: '新增成功',
              duration: 3000,
            });
            this.$refs.postForm.resetFields()
            this.postForm = Object.assign({}, defaultForm)
          }
        } finally {
          this.saveLoading = false
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>

</style>